<template>
  <view class="page">
    <view class="school-info">
      <view class="header">
        <!--				学校 icon-->
        <image class="icon" :src="getShowNginxPicUrl('kaoYan_college_logo/' + details.logoUrl)"></image>
        <view class="right">
          <!--					学校名称-->
          <view class="school-name">{{ details.school_name }}</view>
          <view class="school-type">
            <!--						院校类型-->
            <view class="type-name item">{{ details.type_name }}</view>
            <!--						院校标签-->
            <view class="school-label item" v-if="['高等院校', '科研院所'].includes(details.type_school_name)">
              <!--							高等院校-->
              <text class="label-item" v-if="['高等院校'].includes(details.type_school_name)">高等院校</text>
              <!--							科研院所-->
              <text class="label-item" v-else-if="['科研院所'].includes(details.type_school_name)">科研院所</text>
            </view>
          </view>
        </view>
      </view>
      <view class="info">
        <!--				院校特色-->
        <view class="item" v-if="details.is_985 || details.is_211 || details.is_zihuaxian || details.syl">
          <view class="label">院校特色</view>
          <view class="value label-item" v-if="details.is_985 === 1">985</view>
          <view class="value label-item" v-if="details.is_211 === 1">211</view>
          <view class="value label-item" v-if="details.is_zihuaxian === 1">自划线</view>
          <view class="value label-item" v-if="details.syl">双一流</view>
        </view>
        <!--				院校位置-->
        <view class="item">
          <view class="label">院校位置</view>
          <view class="value location">
            <image class="icon" :src="locationIcon" mode="heightFix"></image>
            <text>{{ details.province_area }}区</text>
            <text>{{ details.province_name }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="tab-list">
      <view
        class="tab-item"
        v-for="item in tabList"
        :key="item"
        :class="{ active: currentSelectTab === item }"
        @click="currentSelectTab = item"
        >{{ item }}</view
      >
    </view>
    <template v-if="details.school_id">
      <majors v-if="currentSelectTab === '专业'" class="tab-content" :details="details" ref="majors" />
      <scores v-else-if="currentSelectTab === '分数'" class="tab-content" :details="details" ref="scores" />
    </template>
  </view>
</template>

<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import locationIcon from "./assets/location.svg"
import scores from "./components/scores.vue"
import majors from "./components/majors.vue"

export default {
  methods: { getShowNginxPicUrl },
  components: {
    scores,
    majors,
  },
  data() {
    return {
      details: {
        province_name: "",
        province_area: "",
        type_name: "",
        is_985: "",
        is_211: "",
        is_zihuaxian: "",
        syl: "",
        type_school_name: "",
        logoUrl: "",
        school_id: "",
        school_name: "",
      },
      locationIcon,
      tabList: ["分数", "专业"],
      currentSelectTab: "分数",
    }
  },
  onLoad(query) {
    this.details = {
      ...query,
      province_name: decodeURIComponent(query.province_name),
      province_area: decodeURIComponent(query.province_area),
      type_name: decodeURIComponent(query.type_name),
      type_school_name: decodeURIComponent(query.type_school_name),
      school_name: decodeURIComponent(query.school_name),
    }
    console.log(this.details, "this.details")
  },
  onReachBottom() {
    switch (this.currentSelectTab) {
      case "专业":
        this.$refs.majors.onReachBottom()
        break
      case "分数":
        this.$refs.scores.onReachBottom()
        break
    }
  },
}
</script>

<style lang="scss" scoped>
.page {
  background: var(--theme-color-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  > .school-info {
    > .header {
      display: flex;
      background: white;
      padding: 30rpx;
      align-items: center;
      > .icon {
        width: 130rpx;
        height: 130rpx;
        margin-right: 20px;
      }
      > .right {
        width: 0;
        flex: 1;
        > .school-name {
          font-size: 34rpx;
        }
        > .school-type {
          display: flex;
          font-size: 28rpx;
          margin-top: 30rpx;
          > .item {
            padding: 5rpx 20rpx;
          }
          > .type-name {
            border-top-left-radius: 23rpx;
            border-bottom-left-radius: 23rpx;
            color: white;
            background: var(--theme-color);
          }
          > .school-label {
            border-top-right-radius: 23rpx;
            border-bottom-right-radius: 23rpx;
            color: var(--text-color-theme);
            background: var(--theme-color-light);
            > .label-item {
            }
          }
        }
      }
    }
    > .info {
      margin: {
        top: 30rpx;
        left: 30rpx;
        right: 30rpx;
      }
      background: white;
      border-radius: 30rpx;
      padding: 0 30rpx;
      > .item {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
        &:not(:last-child) {
          border-bottom: 2rpx solid var(--border-color);
        }
        > .label {
          font-size: 30rpx;
        }
        > .value {
          &.label-item {
            padding: 5rpx 10rpx;
            background: var(--gray-background-color);
            border-radius: 10rpx;
            font-size: 28rpx;
            margin-left: 20rpx;
          }
          &.location {
            display: flex;
            font-size: 28rpx;
            align-items: center;
            color: var(--text-color-light);
            > .icon {
              height: 30rpx;
              max-width: 30rpx;
            }
            > text {
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  }
  > .tab-list {
    display: flex;
    padding: 30rpx 0;
    font-size: 34rpx;
    > .tab-item {
      width: 0;
      flex: 1;
      text-align: center;
      position: relative;
      &.active::after {
        content: "";
        position: absolute;
        width: 50rpx;
        height: 6rpx;
        border-radius: 3rpx;
        top: calc(100% + 6rpx);
        left: 50%;
        transform: translateX(-50%);
        background: var(--theme-color);
      }
    }
  }
  > .tab-content {
    height: 0;
    flex: 1;
  }
}
</style>
